<template>
	<div class="input-box" :style="props.data.attr.style">
		<template v-if="props.data.attr.type == 'input'">
			<el-input style="max-width: 100%;" v-model="value" placeholder="请输入"/>
		</template>
		<template v-else-if="props.data.attr.type == 'inputNumber'">
			<el-input-number style="max-width: 100%;" v-model="value" controls-position="right" placeholder="请输入"/>
		</template>
		<template v-else-if="props.data.attr.type == 'date-day'">
			<el-date-picker style="max-width: 100%;" v-model="value" type="date" value-format="YYYY-MM-DD" placeholder="请选择"/>
		</template>
		<template v-else-if="props.data.attr.type == 'date-month'">
			<el-date-picker style="max-width: 100%;" v-model="value" type="month" value-format="YYYY-MM" placeholder="请选择"/>
		</template>
		<template v-else-if="props.data.attr.type == 'date-year'">
			<el-date-picker style="max-width: 100%;" v-model="value" type="year" value-format="YYYY" placeholder="请选择"/>
		</template>
	</div>
</template>

<script setup>
	import { reactive, ref, computed, onMounted } from 'vue'

	const emits = defineEmits(['change']);

	const props = defineProps({
		data: {
			type: Object,
			default: () => ({})
		}
	})

	const value = computed({
		get: () => {
			return props.data.attr.text;
		},
		set: (val) => {
			emits('change', val);
		}
	})

	const _d = reactive({

	})
	
	onMounted(() => {
	
	})
</script>

<style scoped>
.input-box {
	display: inline-block;
	text-indent: 0;
}
</style>